<template>
  <div class="app-container">
    <div>
      <el-input v-model="listQuery.name" style="width: 200px;" placeholder="名称" />
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" style="float:right;" @click="addOne">添加</el-button>
    </div>
    <table-list
      show-index
      :columns="columns"
      :page-size="listQuery.pageSize"
      :page-num="listQuery.currPage"
      :data="list"
      :total="total"
      style="margin-top: 20px;"
      @currentChange="handlePageChange"
    />
    <add-sample ref="cpAddSample" />
  </div>
</template>

<script>
import tableList from '@/components/table/tableList.vue'
import addSample from './components/addSample.vue'

export default {
  name: 'SampleIndex',
  components: {
    tableList, addSample
  },
  data() {
    return {
      listQuery: {
        currPage: 1,
        pageSize: 15,
        name: ''
      },
      total: 1,
      columns: [
        { text: '样本名称', value: 'name' },
        { text: '信息1', value: 'name' },
        { text: '信息2', value: 'name' },
        { text: '信息3', value: 'name' },
        { text: '操作', type: 'textButton', width: 150, list: this.operButton }
      ],
      list: [
        { name: 'AAA', temp: 12 },
        { name: 'BBB', temp: 22 },
        { name: 'CC', temp: 32 },
        { name: 'DDD', temp: 42 }
      ]
    }
  },
  methods: {
    search() {
      this.listQuery.currPage = 1
      this.getList()
    },
    getList() {},
    addOne() {
      this.$refs.cpAddSample.init()
    },
    updateOne(val) {
      console.log(val.row, 'update one')
      this.$refs.cpAddSample.init(true, val.row)
    },
    deleteOne(val) {
      console.log(val.row, 'delete one')
    },
    operButton() {
      return [
        { value: '编辑', click: this.updateOne },
        { value: '删除', click: this.deleteOne }
      ]
    },
    handlePageChange(val) {
      this.listQuery.currPage = val
    }
  }
}
</script>

<style lang="scss" scoped></style>
